const PropTypes = require('prop-types');
const React = require('react');
const {
  View,
    Animated,
    StyleSheet,
    Platform,
} = require('react-native');

const {
  JDText,
    JDJumping,
    JDRouter,
    JDDevice,
    JDImage,
    JDTouchable,
    JDMta,
    JDSwiper,
    JDButton,
} = require('@areslabs/jdreact-core-lib');

const { NavigationBar } = JDRouter;



class Banner extends React.Component {
    static defaultProps = function() {
        let bannerData = [
            {
                "bannerId": 1,
                "title": "苏泊尔（SUPOR）电饭煲 电饭锅 5L大容量金属拉丝机身 24小时预约CFXB50FC833-75",
                "imgUrl": "https://m.360buyimg.com/mobilecms/s220x220_jfs/t3256/151/636252417/183322/e206a9f8/57bc0719Ndb4806d7.jpg!q70.jpg",
                "linkUrl": "https://sale.jd.com/m/act/cvJgdk3mbf7.html",
            },
            {
                "bannerId": 2,
                "title": "联想(Lenovo)小新Air 13.3英寸超轻薄笔记本电脑（I7-6500U 8G 256G PCIE SSD IPS FHD WIN10）金",
                "imgUrl": "https://m.360buyimg.com/mobilecms/s220x220_jfs/t3175/224/3250631711/81777/f6716ef6/57ee3031N02c54784.jpg!q70.jpg",
                "linkUrl": "https://1.m.jd.com/detail/next?itemId=1300000000000119106",
            },
            {
                "bannerId": 3,
                "title": "靖昕 美国泰迪熊大熊陈乔恩同款巨型毛绒玩具抱抱熊猫布娃娃大号公仔玩偶创意生日男友送女友 薰衣草色美国大熊 1米送小朋友",
                "imgUrl": "https://m.360buyimg.com/mobilecms/s220x220_jfs/t3502/126/369381259/392727/a981efee/58073ea3Nd17e4952.jpg!q70.jpg",
                "linkUrl": "https://1.m.jd.com/detail/next?itemId=1300000000000119106",
            },
            {
                "bannerId": 4,
                "title": "【买4免1 限时抢购】鱼嘴凉鞋浴室拖鞋男女夏季居家室内防滑厚底情侣家居洗澡简约塑料凉拖鞋 深蓝色鱼骨 42-43(适合41-42)",
                "imgUrl": "https://m.360buyimg.com/mobilecms/s220x220_jfs/t2002/339/1803971441/287233/9b04a32c/56de94afN31752973.jpg!q70.jpg",
                "linkUrl": "https://1.m.jd.com/detail/next?itemId=1300000000000119106",
            },
            {
                "bannerId": 5,
                "title": "六品堂颜真卿柳公权楷书欧阳询王羲之书法临摹字贴毛笔字帖字贴水写布仿宣纸加厚文房四宝套装 颜真卿多宝塔",
                "imgUrl": "https://m.360buyimg.com/mobilecms/s220x220_jfs/t4459/167/1267569947/487008/e5bb4b8b/58db1676Ne5b5c54d.jpg!q70.jpg",
                "linkUrl": "https://1.m.jd.com/detail/next?itemId=1300000000000119106",
            }

        ]
        let dataSource = new JDSwiper.DataSource({
            pageHasChanged: (p1, p2) => p1 !== p2,
        });
        return {
            dataSource: dataSource.cloneWithPages(bannerData)
        };
    }();

    componentDidMount() {

    }

    render() {
        let dataSource = this.props.dataSource
        return (
            <View>
                <NavigationBar Title="轮播图2" />
                <View style={styles.body}>
                    <View style={styles.viewPager}>
                        <JDSwiper
                            interval={200}
                            style={styles.viewPager}
                            width={JDDevice.width}
                            itemWidth={BANNER_WIDTH}
                            itemPadding={BANNER_PADDING}
                            dataSource={dataSource}
                            renderPage={this._renderPage}
                            autoPlay={true}
                            onChangePage={this._onChangePage}
                        />
                    </View>
                </View>
            </View>
        )
    }

    _onChangePage = (pageNumber) => {
        console.log(`current pageNumber is :${pageNumber}`)
    };

    _renderPage = (data, pageId, viewPagerState) => {
        return (
            <View style={styles.bannerItem}>
                <JDImage style={styles.bannerImage} source={{ uri: data.imgUrl }} />
                <JDButton onPress={() => { alert(pageId) }}>{pageId}</JDButton>
            </View>
        );
    };
}

const BANNER_HEIGHT = JDDevice.getRpx(752);
const BANNER_PADDING = Math.floor(JDDevice.width * 0.025);
const BANNER_WIDTH = JDDevice.width - BANNER_PADDING * 2 - 30 * 2;

const BANNER_SHADOW_HEIGHT = BANNER_HEIGHT + BANNER_PADDING * 4;

const styles = StyleSheet.create({
    body: {
        flex: 1,
        height: BANNER_SHADOW_HEIGHT,
    },
    viewPager: {
        width: JDDevice.width,
        height: BANNER_SHADOW_HEIGHT,
        overflow: 'hidden',

    },
    bannerItem: {
        width: BANNER_WIDTH,
        height: JDDevice.getRpx(752),
    },
    bannerImage: {
        width: BANNER_WIDTH,
        height: JDDevice.getRpx(500),
    },
});


module.exports = Banner;
